<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"content="{{site.description}}">
    <meta name="keywords" content="{{site.keywords}}"/>
    <meta property="og:title" content="{{site.title}}" />
    <meta property="og:description" content="{{site.description}}" />
    <title>{{site.title}}-{{site.name}}</title>
    {{include './common/css.html'}}
</head>
<body>
   {{include './common/header.html'}}
    <!-- 页面标题 -->
    <section class="bg-blue-400 text-white py-10 mt-16">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl font-bold">在线留言</h1>
            <p class="mt-4 text-xl">欢迎留下您的宝贵意见和建议</p>
        </div>
    </section>

    <!-- 留言表单 -->
    <section class="py-16">
        <div class="container mx-auto px-4">
            <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md p-8">
                <h2 class="text-2xl font-bold mb-8 text-center">留言板</h2>
                <form id="message-form" class="space-y-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                        <input type="text" id="name" name="name" required 
                               class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                    </div>
                    <div>
                        <label for="contact" class="block text-sm font-medium text-gray-700 mb-1">联系方式</label>
                        <input type="text" id="contact" name="contact" required 
                               class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" 
                               placeholder="电话/邮箱/微信">
                    </div>
                    <div>
                        <label for="message" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
                        <textarea id="message" name="message" rows="5" required
                                  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"></textarea>
                    </div>
                    <div class="flex justify-center">
                        <button type="submit" 
                                class="btn-primary px-6 py-2 bg-primary-600 text-white font-medium rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            提交留言
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    {{include './common/footer.html'}}
    {{include './common/js.html'}}
    <script>
     

        // 表单验证和提交
        document.getElementById('message-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const name = document.getElementById('name').value.trim();
            const contact = document.getElementById('contact').value.trim();
            const message = document.getElementById('message').value.trim();
            
            if (!name || !contact || !message) {
                alert('请填写所有必填项！');
                return;
            }
            
            // 这里可以添加实际的表单提交逻辑
            alert('留言提交成功！感谢您的反馈。');
            this.reset();
        });
    </script>
</body>
</html>